package com.turman.composebook.views

import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.Indication
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Call
import androidx.compose.material.icons.filled.Done
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.FavoriteBorder
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.IconToggleButton
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.compositionLocalOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp

@Composable
fun ButtonSampleView(modifier: Modifier = Modifier) {
    LazyColumn(modifier = modifier.fillMaxSize()) {
        item {
            val paddingModifier = Modifier.padding(8.dp)

            TutorialHeader(text = "Button")

            TutorialText2(text = "Button")
            ButtonExample(modifier = paddingModifier)
            ButtonWithIconExample(modifier = paddingModifier)
            ButtonBackgroundExample(paddingModifier)
            GradientButtonExample(paddingModifier)

            TutorialText2(text = "Icon Button")
            IconButtonExample(paddingModifier)

            TutorialText2(text = "Custom Ripple Icon Button")
            CustomIconButtonExample(paddingModifier)

            TutorialHeader(text = "Floating Action Button")
            FloatingActionButtonExample(paddingModifier)
        }
    }
}

@Composable
fun FullWidthRow(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable () -> Unit
) {

    Row(
        modifier = modifier.fillMaxWidth(),
        horizontalArrangement = horizontalArrangement,
        verticalAlignment = verticalAlignment
    ) {
        content()
    }
}

@Composable
fun ButtonExample(modifier: Modifier) {
    var enabled1 by remember {
        mutableStateOf(true)
    }
    var enabled2 by remember {
        mutableStateOf(true)
    }
    var enabled3 by remember {
        mutableStateOf(true)
    }
    FullWidthRow {
        Button(onClick = { enabled1 = false }, modifier = modifier, enabled = enabled1) {
            Text(text = "Button")
        }

        TextButton(onClick = { enabled2 = false }, modifier = modifier, enabled = enabled2) {
            Text(text = "TextButton")
        }

        OutlinedButton(onClick = { enabled3 = false }, modifier = modifier, enabled = enabled3) {
            Text(text = "OutlinedButton")
        }
    }
}

@Composable
private fun ButtonWithIconExample(modifier: Modifier) {
    FullWidthRow {
        Button(
            onClick = {},
            modifier = modifier
        ) {
            Row {
                Icon(
                    imageVector = Icons.Default.FavoriteBorder,
                    modifier = Modifier.padding(end = 4.dp),
                    contentDescription = null
                )
                Text(text = "Icon+Text")
            }
        }

        Button(
            onClick = {},
            modifier = modifier
        ) {
            Text(text = "Text+Icon")
            Icon(
                imageVector = Icons.Default.FavoriteBorder,
                modifier = Modifier.padding(start = 4.dp),
                contentDescription = null
            )
        }

        Button(
            onClick = {},
            shape = RoundedCornerShape(20),
            modifier = modifier
        ) {
            Icon(
                imageVector = Icons.Default.FavoriteBorder,
                contentDescription = null
            )
        }
    }

    FullWidthRow {
        OutlinedButton(
            onClick = {},
            modifier = Modifier.padding(8.dp)
        ) {
            Icon(
                imageVector = Icons.Default.Call,
                modifier = Modifier.padding(start = 4.dp, end = 4.dp),
                contentDescription = null
            )
            Text(text = "Icon+Text+Icon")
            Icon(
                imageVector = Icons.Default.FavoriteBorder,
                modifier = Modifier.padding(start = 4.dp),
                contentDescription = null
            )
        }
    }
}


@Composable
private fun ButtonBackgroundExample(modifier: Modifier) {
    FullWidthRow {

        Button(
            onClick = {},
            modifier = modifier,
            colors = ButtonDefaults.buttonColors(
                containerColor = Color(0xffF57C00),
                contentColor = Color(0xffB2EBF2)
            )
        ) {
            Text(text = "Button")
        }

        TextButton(
            onClick = {},
            modifier = modifier,
            colors = ButtonDefaults.textButtonColors(
                contentColor = Color(0xff8BC34A)
            )
        ) {
            Text(text = "TextButton")
        }

        OutlinedButton(
            onClick = {},
            modifier = modifier,
            colors = ButtonDefaults.outlinedButtonColors(
                contentColor = Color(0xff795548)
            )
        ) {
            Text(text = "Outlined")
        }
    }
}

@Composable
private fun GradientButtonExample(modifier: Modifier) {

    val horizontalGradientBrush = Brush.horizontalGradient(
        colors = listOf(
            Color(0xffF57F17),
            Color(0xffFFEE58),
            Color(0xffFFF9C4)
        )
    )

    val verticalGradientBrush = Brush.verticalGradient(
        colors = listOf(
            Color(0xff4E342E),
            Color(0xff8D6E63),
            Color(0xffD7CCC8)
        )
    )

    FullWidthRow {
        Column(
            modifier = modifier
                .clip(RoundedCornerShape(20))
                .background(brush = horizontalGradientBrush)
                .clickable(onClick = { })
                .then(modifier)
        ) {
            Text(text = "Horizontal Gradient")
        }

        Column(
            modifier = modifier
                .clip(RoundedCornerShape(20))
                .background(brush = verticalGradientBrush)
                .clickable(onClick = { })
                .then(modifier)
        ) {
            Text(text = "Vertical Gradient")
        }
    }
}


@Composable
private fun IconButtonExample(modifier: Modifier) {

    FullWidthRow {
        var checked1 by remember { mutableStateOf(false) }
        val tint by animateColorAsState(
            targetValue = if (checked1) Color(0xffE91E63) else Color(0xffB0BEC5),
            animationSpec = tween(durationMillis = 400)
        )
        IconButton(onClick = {
            checked1 = !checked1
        }, modifier = modifier) {
            Icon(
                Icons.Filled.Favorite,
                tint = tint,
                contentDescription = null
            )
        }

        var checked by remember { mutableStateOf(false) }

        IconToggleButton(
            checked = checked,
            onCheckedChange = { checked = it },
            modifier = modifier
        ) {

            val tint by animateColorAsState(
                targetValue = if (checked) Color(0xffE91E63) else Color(0xffB0BEC5),
                animationSpec = tween(durationMillis = 400)
            )

            Icon(
                Icons.Filled.Favorite, tint = tint,
                contentDescription = null
            )
        }
    }
}


val LocalAlpha = compositionLocalOf<Float> { error("No alpha provided") }

@Composable
fun IndicatingIconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    indication: Indication = rememberRipple(bounded = false, radius = 24.dp),
    content: @Composable () -> Unit
) {

    Box(
        modifier = modifier
            .clickable(
                onClick = onClick,
                enabled = enabled,
                role = Role.Button,
                interactionSource = interactionSource,
                indication = indication
            ),
        contentAlignment = Alignment.Center
    ) {
        val contentAlpha = if (enabled) 1.0f else 0.3f
        CompositionLocalProvider(LocalAlpha provides contentAlpha, content = content)
    }
}

@Composable
private fun CustomIconButtonExample(modifier: Modifier) {

    // rememberRipple of this custom button defines ripple radius, color and if it will be bounded

    FullWidthRow(modifier.padding(horizontal = 30.dp)) {
        IndicatingIconButton(
            onClick = { /*TODO*/ },
            indication = rememberRipple(
                bounded = false,
                radius = 40.dp,
                color = Color(
                    0xff42A5F5
                )
            ), enabled = true
        ) {

            Icon(
                Icons.Filled.Favorite,
                contentDescription = null,
                tint = Color(0xffE91E63),
                modifier = Modifier.alpha(LocalAlpha.current)
            )
        }

        Spacer(modifier = Modifier.width(40.dp))

        IndicatingIconButton(
            onClick = { /*TODO*/ },
            indication = rememberRipple(
                bounded = false,
                radius = 30.dp,
                color = Color(0xffBF360C)
            ), enabled = false
        ) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = null,
                tint = Color(0xffE91E63),
                modifier = Modifier.alpha(LocalAlpha.current)
            )
        }

        Spacer(modifier = Modifier.width(40.dp))

        // this one's ripple is bounded
        IndicatingIconButton(
            onClick = { /*TODO*/ },
            indication = rememberRipple(
                bounded = true,
                radius = 30.dp,
                color = Color(0xff311B92)
            ), enabled = true
        ) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = null,
                tint = Color(0xffE91E63),
                modifier = Modifier
                    .size(36.dp)
                    .alpha(LocalAlpha.current)
            )
        }

        Spacer(modifier = Modifier.width(40.dp))

        IndicatingIconButton(
            onClick = { /*TODO*/ },
            indication = rememberRipple(
                bounded = false,
                radius = 50.dp,
                color = Color(0xff43A047)
            ), enabled = false
        ) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = null,
                tint = Color(0xffE91E63),
                modifier = Modifier
                    .size(36.dp)
                    .alpha(
                        LocalAlpha.current
                    ))
        }
    }
}


@Composable
private fun FloatingActionButtonExample(modifier: Modifier) {

    FullWidthRow {

        FloatingActionButton(
            onClick = {},
            modifier = modifier,
        ) {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = null
            )
        }

        FloatingActionButton(
            onClick = {},
            modifier = modifier,
            containerColor = Color(0xffFFA000)
        ) {
            Icon(
                Icons.Filled.Done, tint = Color.White,
                contentDescription = null
            )
        }

        ExtendedFloatingActionButton(
            content = { Text("Extended") },
            onClick = {},
            modifier = modifier
        )

        ExtendedFloatingActionButton(
            icon = {
                Icon(
                    imageVector = Icons.Filled.Favorite,
                    tint = Color.White,
                    contentDescription = null
                )
            },
            text = { Text("Like", color = Color.White) },
            containerColor = Color(0xffEC407A),
            onClick = {},
            modifier = modifier
        )
    }
}
















